<template>
	<view class="detailContainer">
		<view class="content_title">
			<view class="content_title_top">
				<view class="title">{{title}}</view>
				<u-tag :text="state > currentIndex ? '已完成' : projectInfo.isTimeout ? '已超时' : '进行中'" size='small' :type="state > currentIndex ? 'success' : projectInfo.isTimeout ? 'error' : 'primary'"></u-tag>
			</view>
			<view class="time">{{form.createTime}}</view>
		</view>
		<view>
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="验收时间" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="timeShow" :params="params" @confirm="ensureTime"></u-picker>
					<u-button @click="getTime" :hair-line="false" :disabled="isHide" :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time0 ? form.time0 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>
			
				<u-form-item label="验收报告" :border-bottom="false" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file}>{{file ? file : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false"  :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file0]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file0)">下载</view>
					</view>
					
				</u-form-item>
			
			</u-form>
			<u-button :ripple="true" :hair-line="false" :custom-style="{
						backgroundColor: '#5c77ff',
						color:'#ffffff',
						margin:'20px 0',
						fontSize:'18px',
						padding:'5px 0',
						boxSizing:'content-box',
					}"
					@click="submit"
					v-if="!isHide"
					>
				提交
			</u-button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default { //项目推进item组件
		name: "Poject_tj_item",
		props: ['title', 'projectInfo', 'state','currentIndex'],
		data() {
			return {
				isHide:false,
				file:'',
				timeShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form:{
					file0:'',
					time0:'',
					projectId:'',
				}
			}
		},
		mounted(){
			this.getProjectInfo()
		},
		methods: {
			getProjectInfo(){
				this.$ajax({
					url: `/2/wx/stage/${this.projectInfo.id}`,
					method: 'GET',
					success: res => {
						if (res.data.state == 200 && res.data.data.length != 0) {
							this.form = res.data.data[0]
							this.isHide = true
						}
					}
				});
			},
			getTime(){
				this.timeShow = true
			},
			ensureTime(data){
				this.form.time0 = data.year + '-' + data.month + '-' + data.day
			},
			fileUpload(){
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						if (res.tempFiles[0].path && res.tempFiles[0].type == "file") {
							this.file = res.tempFiles[0].name
							uni.uploadFile({
								url: this.$my_global.url + '/2/wx/stage/upload', 
								filePath: res.tempFiles[0].path,
								name:'f',
								header: {
									"Content-Type": 'multipart/form-data',
									ssid:uni.getStorageSync('token')
								},
								formData:{
									name:res.tempFiles[0].name,
									projectId: this.projectInfo.id,
								},
								success: (res) => {
									this.form.file0 = JSON.parse(res.data).data.url
								}
							});
						} else {
							this.$refs.uToast.show({
								title: '请选择正确的文件',
								type: 'warning',
							})
						}
				
					}
				});
			},
			submit(){
				this.form.projectId = this.projectInfo.id
				this.$ajax({
					url: this.$my_global.url + '/2/wx/stage',
					method: 'POST',
					data: this.form,
					success: (res) => {
						if (res.data.state == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
						}
						this.$ajax({
							url: this.$my_global.url + `/2/wx/stage/complete/${this.projectInfo.id}`,
							method: 'PUT',
							success: (res) => {
								this.$emit('changeCurrentIndex', ++this.currentIndex)
							},
							complete: () => {
						
							},
						});
					},
					complete: () => {
				
					},
				});
				this.$ajax({
					url: '/2/wx/stage',
					method: 'POST',
					data: this.form,
					success: (res) => {
						if (res.data.state == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
						}
						this.$ajax({
							url: `/2/wx/stage/complete/${this.projectInfo.id}`,
							method: 'PUT',
							success: (res) => {
								this.$emit('changeCurrentIndex', ++this.currentIndex)
							},
							complete: () => {
						
							},
						});
					},
					complete: () => {
									
					},
				});
			},
			downLoadFile(url){
				uni.downloadFile({
					url: this.$my_global.url + url, 
					header:{
						ssid:uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.statusCode === 200) {
							wx.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {
									
								}
				
							})
							this.$refs.uToast.show({
								title: '下载成功',
								type: 'success',
								position: 'top'
							})
						}
					}
				});
			}
		},
		created() {

		},
	}
</script>

<style lang="scss" scoped>
	.detailContainer {
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}
	
	.content_title {
		.content_title_top {
			display: flex;
			align-items: center;
	
			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}
	
		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}
	.flexContainer {
		display: flex;
		justify-content: space-between;
	
		.chooseFile {
			width: 50vw;
			border: 1px solid #ccc;
			padding: 0 10px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.isColor {
			color: #C0C4CC;
		}
	}
	.fileList {
		margin-bottom: 8px;
		display: flex;
		align-items: center;
		position: relative;
	
		>view:nth-of-type(1) {
			margin-right: 8px;
		}
	
		>view:nth-of-type(2) {
			overflow: hidden;
			width: 60%;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.downLoad {
			position: absolute;
			right: 15%;
			color: #8294FD;
			border-bottom: 1px solid #8294FD;
	
		}
	}
</style>
